<template>
	<view :class="{ hide: hide }">
		<view class="qui-grids gutter10" :class="'column' + column">
			<view class="hem">
				<view class="qui-grid" v-for="(item, index) in imgs" :key="index" @tap="ViewImage" :data-url="imgs[index]">
					<view class="img1x1 relative">
						<image style="height: 100%; width: 100%;" class="abs abslt" :src="imgs[index]" mode="aspectFill"></image>
						<view v-if="progress < 100 &&progress>0" class="progress-mask">
							<view class="abs abscc">{{ progress }}%</view>
						</view>
						<view class="abs absrt wh40 bg-red flex a-center j-center" @tap.stop="DelImg" :data-index="index"><text class="cuIcon-close fs30"></text></view>
					</view>
				</view>
				<view class="qui-grid" @tap="ChooseImage" v-if="imgs.length < count">
					<view class="img1x1 relative"><text class="cuIcon-cameraadd abs abscc fs50"></text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import Config from '@/utils/config.js';
export default {
	name: 'ImagePicker',
	props: {
		index: {
			type: [String, Number],
			default: 0
		},
		hide: {
			type: Boolean,
			default: false
		},
		count: {
			type: [String, Number],
			default: 4
		},
		column: {
			type: [String, Number],
			default: 4
		}
	},
	data() {
		return {
			progress: 0,
			imgs: [],
			file: ''
		};
	},
	methods: {
		ChooseImage() {
			const token = uni.getStorageSync('token');
			// console.log(token)
			let baseUrl;
			// #ifndef H5
			baseUrl = Config.http + Config.hostName;
			// #endif
			// #ifdef H5
			if (process.env.NODE_ENV === 'development') {
				baseUrl = '';
			} else {
				baseUrl = Config.http + Config.hostName;
			}
			// #endif
			uni.chooseImage({
				count: 1, //只能一张一张选
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: res => {
					if (this.imgs.length != 0) {
						this.imgs = this.imgs.concat(res.tempFilePaths);
					} else {
						this.imgs = res.tempFilePaths;
					}
					const uploadTask = uni.uploadFile({
						url: baseUrl + Config.uploadApiUrl,
						filePath: this.imgs[this.imgs.length - 1],
						name: 'file',
						header: {
							// 'content-type': 'multipart/form-data',
							// 'Authorization': "Bearer "+token,
							token: token
						},
						success: uploadFileRes => {
							const res = JSON.parse(uploadFileRes.data);
							this.success(res.data.url);
						},
						fail: res => {
							this.imgs = [];
							uni.showToast({
								icon: 'none',
								title: '图片上传失败！'
							});
						}
					});

					uploadTask.onProgressUpdate(res => {
						this.progress = res.progress;
						// console.log('上传进度' + res.progress);
						// console.log('已经上传的数据长度' + res.totalBytesSent);
						// console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);

						// 测试条件，取消上传任务。
						// if (res.progress > 90) {
						// 	uploadTask.abort();
						// }
					});
				}
			});
		},
		ViewImage(e) {
			uni.previewImage({
				urls: this.imgs,
				current: e.currentTarget.dataset.url
			});
		},
		DelImg(e) {
			this.imgs.splice(e.currentTarget.dataset.index, 1);
			this.$emit('del', e.currentTarget.dataset.index);
		},
		success(res) {
			this.$emit('success', {
				file: res,
				index: this.index
			});
		}
	}
};
</script>

<style>
.hide {
	opacity: 0;
	width: 0;
	height: 0;
	overflow: hidden;
}
.progress-mask {
	position: absolute;
	z-index: 999;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.5);
}
</style>
